<template>
    <section class="SuccessfulCasesDetails-box">
        <app-header></app-header>

        <!--背景图-->
        <article class="bg-box">
            <div class="inside">
                <div class="container">
                    <h2>Successful Cases</h2>
                    <h4>
                        <p class="clearfix">
                            <i class="iconfont icon-presentationbus"></i> 成功案例
                        </p>
                    </h4>
                </div>
            </div>
        </article>
        <!--中间内容-->
        <div class="content">
            <div class="container">
                <a-breadcrumb>
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link to="/SuccessfulCases">成功案例</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>案例详情</a-breadcrumb-item>
                </a-breadcrumb>
                <a-row :gutter="40" class="main-content">
                    <a-col :xs="24" :sm="44" :md="16" :lg="16" :xl="16" class="left-box">
                        <div class="inside" v-show="!noDataShow">
                            <h1>{{ isNull0(DetailsData.title) }}</h1>
                            <p>
                                <span><i class="iconfont icon-fabushijian"></i> {{ momentFormat(DetailsData.createTime, 'YYYY-MM-DD') }}</span>
                                <span><i class="iconfont icon-source"></i> {{ isNull0(DetailsData.source) }}</span>
                                <span><i class="iconfont icon-yanjing2"></i>  {{ isNull0(DetailsData.pageView) }}</span>
                            </p>
                            <aside>
                                <i class="iconfont icon-baojiaquotation2 leftTop"></i>
                                <p id="SuccessfulCases-description">{{ isNull0(DetailsData.description) }}</p>
                                <i class="iconfont icon-baojiaquotation rightBottom"></i>
                            </aside>
                            <div class="exhibition-content" v-html="isNull0(DetailsData.content)">
                            </div>
                        </div>
                        <h5 style="text-align: center; padding: 15px;" v-show="noDataShow">暂未查询到数据！</h5>

                        <!--展会活动报名框-->
                        <exhibitionsignUp></exhibitionsignUp>

                    </a-col>
                    <!--公共页面主体的右侧内容-->
                    <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" class="right-box">
                        <rightList :msgType="5"></rightList>
                    </a-col>
                </a-row>
            </div>
        </div>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import exhibitionsignUp from '../../components/exhibitionsignUp.vue';//公共组件——展会活动报名框
    import rightList from '../../components/rightList.vue';//公共组件——页面主体的右侧内容
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部

    export default {
        data() {
            return {
                SuccessfulCasesId: this.$route.query.SuccessfulCasesId,// 成功案例Id
                DetailsData: {}, //详情数据数据
                noDataShow: false, //详情数据——没有数据提示信息是否显示

                metaInfo_title: '',//vue-meta动态管理头部标签-title
                metaInfo_keywords: '',//vue-meta动态管理头部标签-keywords
                metaInfo_description: '',//vue-meta动态管理头部标签-description

            }
        },
        metaInfo () {
            return {
                title: this.metaInfo_title,
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: this.metaInfo_keywords },
                    { vmid: 'description', name: 'description', content: this.metaInfo_description },
                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            //获取成功案例详情数据
            this.getSuccessfulCasesDetailsData()
        },
        methods: {
            // 获取成功案例详情数据
            getSuccessfulCasesDetailsData() {
                this.$get('/case/detail/'+ this.SuccessfulCasesId).then(res => {
                    if (res.status === 0) {
                        this.DetailsData = res.data;
                        this.metaInfo_title = res.data.seoTitle;
                        this.metaInfo_keywords = res.data.seoKeyword;
                        this.metaInfo_description = res.data.seoDescription;

                        this.noDataShow = false;
                    } else {
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                })
            },
        },
        components: {
            'app-header': Header,//公共组件——头部
            exhibitionsignUp,//公共组件——展会活动报名框
            rightList,//公共组件——页面主体的右侧内容
            BackTop,//公共组件——返回顶部
        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .SuccessfulCasesDetails-box {
            background: #f5f5f5;
            //背景图
            .bg-box {
                background: url(/static/img/ConsultantTeam3.jpg) no-repeat center center;
                background-size: cover;
                padding: 0 !important;
                >.inside {
                    background: rgba(15, 40, 54, 0.6);
                    >.container {
                        padding: 200px 0;
                        text-align: center;
                        >h2 {
                            font-size: 35px;
                            font-family: 'HelveticaNeue-UltraLight', "PingFang SC", 'Microsoft Yahei', Arial, Verdana, sans-serif;
                            font-weight: 100;
                            color: #fff;
                        }
                        >h4 {
                            line-height: 35px;
                            font-size: 30px;
                            padding: 20px 0 30px 0;
                            color: #fff;
                            >p {
                                display: inline-block;
                                >i {
                                    font-size: 35px;
                                    color: #3cd0c5;
                                    float: left;
                                    margin: 0 10px 0 0;
                                }
                            }
                        }
                    }
                }
            }
            .content {
                padding: 30px 0;
                > .container {
                    padding: 0;
                    > .main-content {
                        padding: 40px 0 0 0;
                        > .left-box {
                            padding: 0;
                            background: #fff;
                            > .inside{
                                padding: 40px;
                                background: #fff;
                                >h1{
                                    font-size: 25px;
                                    color: #38485a;
                                    font-weight: bold;
                                    margin: 10px 0;
                                }
                                >p{
                                    margin: 20px 0;
                                    color: #00aced;
                                    >span{
                                        margin: 0 0 0 20px;
                                        cursor: pointer;
                                    }
                                    >span:first-of-type{
                                        margin: 0;
                                    }
                                }
                                >aside{
                                    margin: 20px 0;
                                    padding: 40px;
                                    position: relative;
                                    background: #f8f8f8;
                                    z-index: 4;
                                    >i{
                                        font-size: 30px;
                                    }
                                    >i.leftTop{
                                        position: absolute;
                                        left: 10px;
                                        top: 0;
                                        z-index: 5;
                                    }
                                    >p{
                                        font-size: 16px;
                                        line-height: 30px;
                                        margin-bottom: 0px;
                                        >span{
                                            margin: 0 0 0 20px;
                                        }
                                        >span:first-of-type{
                                            margin: 0;
                                        }
                                    }
                                    >i.rightBottom{
                                        position: absolute;
                                        right: 10px;
                                        bottom: 0;
                                        z-index: 5;
                                    }

                                }

                                .exhibition-content{
                                    p{
                                        margin-bottom: 0;
                                    }
                                    img{
                                        display: inline-block;
                                        width: 100%;
                                        height: auto;
                                        margin-top: 30px;
                                        margin-bottom: 30px;
                                        margin-left: auto;
                                        margin-right: auto;
                                    }
                                }
                            }
                        }
                        /* 右侧列表——广告轮播位，推荐房源，热门资讯，客户留言 */
                        > .right-box{
                            >.inside {
                                background: #fff;
                                padding: 15px;
                            }
                        }

                    }
                }
            }
        }
    }
</style>
